@{block #content}
<h1>{$title}</h1>
<p>
    <a href="{plink add}" class="button ui-state-default ui-corner-all" title="{!_'Add user'}">{!_"Add user"}</a>
    {if ($search !== "" && $search !== null)}
        <a href="{plink default ''}" class="button ui-state-default ui-corner-all" title="{!_'Show all users'}">{!_"Show all users"}</a>
    {/if}
</p>

<div class="searchForm">
{control search}
</div>

<script type="text/javascript">
    var userSearchTimeout;

    $("#frmsearch-user").keyup(function() {
        clearTimeout(userSearchTimeout);
        userSearchTimeout = setTimeout(function(){
            $.getJSON(
                {link default! },
                {'search': $('#frmsearch-user').val()},
                function(payload) {

                    //rendering snippets
                    $.nette.success(payload);

                    //rendering buttons
                    $("a.button").button();
                    $("button").button();
                }
            );
        },500);
        
    });
</script>

{snippet users}

{control paginator}

<noscript><style type="text/css">.inneruserstable { display:block; }</style></noscript>
<script type="text/javascript">
    var showUserInfo=-1;
    function userOver(target){
        if(showUserInfo!=target){
            $('.inneruserstable:eq('+showUserInfo+')').slideUp('slow');
            showUserInfo=-1;
        }
        $('.inneruserstable:eq('+target+')').stop(true,true).slideDown('slow');
    }
    function userOut(target){
        if(showUserInfo!=target)$('.inneruserstable:eq('+target+')').delay(500).slideUp('slow');
    }
    function userClick(target){
        if(showUserInfo!=target){
            showUserInfo=target;
        } else {
            $('.inneruserstable:eq('+showUserInfo+')').slideUp('slow');
            showUserInfo=-1;
        }
    }
</script>

{if count($users) == 0}
    <p>{_"No users match."}</p>
{else}
    <table class="invisibletable">
        <tr><th>{_"User name"}</th><th>{_"Edit"}</th><th>{_"ACL"}</th><th>{_"Delete"}</th></tr>
        {foreach $users as $user}
        <tr class="cursorPointer{if !count($users_roles[$user['user_name']])} errorRow{/if}" onclick="userClick({$iterator->getCounter()-1});" onmouseover="userOver({$iterator->getCounter()-1});" onmouseout="userOut({$iterator->getCounter()-1});">
            <td>{$user['user_name']}</td>
            <td><a href="{plink Users:edit, $user['user_name']}" class="button ui-state-default ui-corner-all" title="{_'Edit user'}"><span class="ui-icon ui-icon-wrench">{_'edit'}</span></a></td>
            <td><a href="{plink Users:access, $user['user_name']}" class="button ui-state-default ui-corner-all" title="{_'Show access control list'}"><span class="ui-icon ui-icon-locked">{_'acl'}</span></a></td>
            <td><a href="{plink Users:delete, $user['user_name']}" class="button ui-state-default ui-corner-all" title="{_'Delete user'}"><span class="ui-icon ui-icon-trash">{_'delete'}</span></a></td>
        </tr>
        <tr onmouseover="userOver({$iterator->getCounter()-1});" onmouseout="userOut({$iterator->getCounter()-1});">
            <td style="padding:0px;" colspan="4"><div class="inneruserstable">
                <div>
                    <strong>{_"ID:"}</strong> {$user['id']}<br/>
                    <strong>{_"Name:"}</strong> {$user['first_name']} {$user['last_name']}<br/>
                    <strong>{_"E-mail:"}</strong> {$user['email']}<br/>
                    <strong>{_"Created:"}</strong> {$user['created']->format("j.n.Y G:i:s")}<br/>
                    <strong>{_"Language:"}</strong> {$user['language']}<br/>
                </div>
                {if count($users_roles[$user['user_name']])}
                    {foreach $users_roles[$user['user_name']] as $role}
                    <div><a href="{plink Roles:access, $role->getId()}" title="{_'Show access for'} {$role->getName()}">{$role->getName()}</a></div>
                    {/foreach}
                {else}
                    <div class="error">{_"No roles assigned to this user."}</div>
                {/if}
            </div></td>
        </tr>
        {/foreach}
    </table>
{/if}

{/snippet}